<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>卡管理</title>
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline">
              <input type="text" name="card" lay-verify="" autocomplete="" placeholder="请输入卡号" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">机器码</label>
            <div class="layui-input-inline">
              <input type="text" name="machineID" lay-verify="" autocomplete="" placeholder="请输入机器码" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">客户端编号</label>
            <div class="layui-input-inline">
              <input type="text" name="clientID" lay-verify="" autocomplete="" placeholder="请输入客户端编号" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <script type="text/html" id="toolbar">
          <div class="layui-btn-container">
            <button class="layui-btn layuiadmin-btn-useradmin" lay-event="add">新建充值卡</button>
          </div>
        </script>
        <table id="list" lay-filter="list"></table>
      </div>

    </div>
  </div>
  <script src="../layuiadmin/layui/layui.js"></script>
  <script src="../js/main.js"></script>
  <script>
    //Demo
    layui.config({
      base: './layuiadmin/' //静态资源所在路径
    }).use(['layer', 'form', 'table', 'laydate'], function() {
      var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form,
        table = layui.table;


      //触发排序事件 
      table.on('sort(list)', function(obj) {
        //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        table.reload('list', {
          initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
            ,
          where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            field: obj.field //排序字段
              ,
            order: obj.type //排序方式,
              ,
            card: $('input[name=card]').val(),
            machineID: $('input[name=machineID]').val(),
            clientID: $('input[name=clientID]').val()
          }
        });
      });
      table.render({
        elem: '#list',
        url: '/cardList',
        toolbar: '#toolbar',
        page: true,
        sort: true,
        autoSort: false,
        cols: [
          [{
            field: 'card',
            title: '卡号',
            width: 150,
            sort: true
          }, {
            field: 'machineID',
            title: '机器码',
            width: 300,
            sort: true
          }, {
            field: 'clientID',
            title: '客户端编号',
            width: 120
          }, {
            field: 'month',
            title: '充值月数',
            width: 120,
          }, {
            field: 'overDate',
            title: '有效期',
            width: 120
          }]
        ]
      });

      table.on('toolbar(list)', function(obj) {
        switch (obj.event) {
          case 'add':
            layer.open({
              type: 2,
              title: '新增卡',
              content: `cardAdd`,
              maxmin: true,
              area: ['450px', '450px'],
              btn: ['确定', '取消'],
              yes: function(index, layero) {
                var iframeWindow = window['layui-layer-iframe' + index],
                  submitID = 'submit',
                  submit = layero.find('iframe').contents().find('#' + submitID);
                //监听提交
                iframeWindow.layui.form.on('submit(' + submitID + ')', function(data) {
                  var field = data.field; //获取提交的字段
                  $.ajax({
                    url: `cardAdd`,
                    type: 'post',
                    data: JSON.stringify(field),
                    contentType: "application/json",
                    success: function(data) {
                      if (!data.code) {
                        table.reload('list');
                        layer.close(index); //关闭弹层

                        data = data.data;
                        var str = "";
                        for (var i = 0; i < data.length; i++) {
                          str += "卡号：" + data[i].card + "\n";
                        }
                        str += "请尽快充值！";
                        layer.prompt({
                          formType: 2,
                          value: str,
                          title: '卡号',
                          btn: ['复制', '关闭'],
                          area: ['350px', '220px']
                        }, function(value, index, elem) {
                          var prompt = document.querySelector(`#layui-layer${index}`);
                          var area = prompt.querySelector('textarea');
                          area.setAttribute('readonly', 'readonly');
                          area.setSelectionRange(0, 9999);
                          area.select();
                          res = document.execCommand('copy');
                          layer.msg('已复制到剪贴板', {
                            icon: 6
                          });
                          layer.close(index);
                        });
                      } else
                        layer.msg(data.msg, {
                          icon: 5
                        });
                    },
                    error: function(data) {
                      layer.msg(data, {
                        icon: 5
                      });
                    }
                  });
                });
                //提交点击
                submit.trigger('click');
              }
            });
            break;
        }
      });

    });
  </script>
</body>

</html>